<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1. 对于这个页面：
		   <html>
		   <body>
		     <div>Users:</div>
		     <ul>
		       <li>John</li>
		       <li>Pete</li>
		     </ul>
		   </body>
		   </html>
		   对于以下各项，请给出至少一种访问方式：
		   - `<div>` DOM 节点？
		   - `<ul>` DOM 节点？
		   - 第二个 `<li>` 节点（即包含 Pete 的节点）？
		   > 提示：
		   > 获取 `<div>` DOM 节点：
		   > ```js
		   > document.body.firstElementChild; -->
		   <div>Users:</div>
		   <ul>
		     <li>John</li>
		     <li>Pete</li>
		   </ul>
		   <script type="text/javascript">
			//<div>
			//querySelector() 方法仅仅返回匹配指定css选择器的第一个元素
		   	let div =document.querySelector('div');
			//firstElementChild返回第一个子节点
			let div1=document.body.firstElementChild;
			//previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点
			let div2=document.querySelector('ul').previousElementSibling;
			console.log(div);
			console.log(div1);
			console.log(div2);
			//<ul>
			let ul =document.querySelector('ul');
			console.log(ul);
			//第二个 `<li>` 节点（即包含 Pete 的节点）
			//lastElementChild返回最后一个子节点（元素节点）
			 let li=document.querySelector('ul').lastElementChild;
			 //ul是上面<ul>
			 let li1=ul.lastElementChild;
			 //querySelectorAll返回所以<li>集合
			 let li2=document.querySelectorAll('li');
			 console.log(li);
			 console.log(li1);
			 //输出下标为[1]的<li>元素
			 console.log(li2[1]);
		   </script>
	</body>
</html>
